import React from 'react';
import ReactDOM from 'react-dom';


let hookStates = [];
let hookIndex = 0;

function useState(initialState){
  hookStates[hookIndex] = hookStates[hookIndex]||initialState;
  let currentIndex = hookIndex; 
  function setState(newState){
    hookStates[currentIndex]=newState;
    render();
  }
  return [hookStates[hookIndex++],setState];
}

function Counter(){
  const [number,setNumber] = React.useState(0);
  return (
    <div>
      <p>{number}</p>
      <button onClick={()=>setNumber(number+1)}>+</button>
    </div>
  )
}

// 只是用useState的问题
// 调用setState，就会触发组件的重新渲染，无论前后的state是否不同
// 父组件更新，子组件也会自动的更新

// 基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在不相等的时候调用setState；在shouldComponentUpdate中判断前后的props和state，如果没有变化，则返回false来阻止更新。


function render() {
  hookIndex = 0
  ReactDOM.render(<Counter />, document.getElementById('root'));
}

render();

